// 遵循commonjs规范
const { smart } = require("webpack-merge")
const { distPath } = require("./paths.js")
const webpackCommonConf = require("./webpack.common.js")


module.exports = smart(webpackCommonConf, {
  mode: "development",  // 指定开发模式打包
  module: {
    rules: [
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        loader: ["file-loader"],
      },
      {
        test: /\.css$/,
        // loader执行顺序是从后向前的
        // 先使用css-loader加载css模块，处理之，交给style-loader
        // style-loader是通过操作DOM的方式，把样式插入到页面中
        loader: ["style-loader", "css-loader",],
      },
      {
        test: /\.less$/,
        // 模块后缀是以less结束的，需要使用less-loader转化成css
        loader: ["style-loader", "css-loader", "postcss-loader", "less-loader"],
      },
    ]
  },
  // 配置开发服务器，在内存中打包
  devServer: {
    port: 8080,
    progress: true, // 显示打包的进度条
    open: true, // 打包成功，自动打开浏览器
    contentBase: distPath, // 根目录（打好的包是放在内存中的）
    compress: true, // 启动gzip压缩 （复习http时）
    proxy: {
      "/api": "http://www.baidu.com",
      "/api2": {
        target: "http://www.baidu.com",
        pathRewrite: {
          "/api2": ""
        }
      }
    }
  },
})

